import { defineStore } from 'pinia'
import axios from 'axios'
import { reactive, ref, type Ref } from 'vue'

const LinesOpts = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union Ads'],
    top: 20,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel: {
      color: 'rgb(64, 158, 255)',
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(64, 158, 255)', // 线的颜色
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: 'rgb(64, 158, 255)',
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgb(64, 158, 255)', // 线的颜色
      },
    },
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: 'rgb(64, 158, 255)',
      },
      itemStyle: {
        color: 'rgb(64, 158, 255)',
      },
      smooth: true,
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        color: '#f4516c',
      },
      itemStyle: {
        color: '#f4516c',
      },
      smooth: true,
    },
  ],
}

interface Total {
  newVisit: number
  messages: number
  purchases: number
  shoppings: number
}

export const useHomeStore = defineStore('home', () => {
  const totalData: Ref<Total> = ref({
    newVisit: 0,
    messages: 0,
    purchases: 0,
    shoppings: 0,
  })

  const visitOpt = reactive(LinesOpts)

  function getTotalData() {
    axios
      .get('https://mock.mengxuegu.com/mock/6888141205d8245baf88ff7e/example/home/total')
      .then(function (response) {
        console.log(response)
        if (response.status === 200 && response.data.code === 0) {
          totalData.value = response.data.data
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  }

  function getVisitTypeDatas() {
    axios
      .get(
        'https://mock.mengxuegu.com/mock/6888141205d8245baf88ff7e/example/home/getVisitTypeDatas',
      )
      .then(function (response) {
        console.log(response)
        if (response.status === 200 && response.data.code === 0) {
          const { xData, emailData, unionAdsData } = response.data.data
          visitOpt.xAxis.data = xData
          visitOpt.series[0].data = emailData
          visitOpt.series[1].data = unionAdsData
          // totalData.value = response.data.data
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  }

  return { totalData, visitOpt, getTotalData, getVisitTypeDatas }
})
